const HtmlWebpackPlugin = require("html-webpack-plugin");

// HtmlWebpackPlugin引入的是构造函数
const  htmlPlugin  = new HtmlWebpackPlugin({
    template: "./src/index.html"
    // static: "./dist"指定路径，生成一个index.html文件
});

module.exports = {
    entry: "./src/index.js",
    output: {
        filename: "bundle.js"
    },
    mode: "development",
    devtool: "source-map",//开发工具,source源代码(src)，map映射
    devServer: {
        static: "./dist",//指定静态服务文件夹
        port: 7097,//改变打开的端口号
        open: true,//自动打开一个新窗口
    },
    plugins: [htmlPlugin]

}

// 现在想要更改这个里面的代码就直接更新
// 编写过程如下
// 在package.json中，写"serve": "webpack serve","dev": "nodemon"；
// 创建一个nodemon.json文件，写如下代码
// {    //json文件里面的内容都要加上双引号，特别注意监听的文件要用数组的形式存放
//     "watch": ["./webpack.config.js"],
//     "exec": "npm run serve"
// }

// 在终端输入npm run dev,然后对应"dev": "nodemon"；进入nodemon.json文件，执行文件中的代码
// 然后监听该页面，执行"npm run serve"这个代码，这里的serve对应"serve": "webpack serve"，
